<template>
  <div class="page pt-12 fz-14">
    <van-nav-bar
      title="旅游攻略列表"
      fixed
      left-arrow
      @click-left="$router.go(-1)"
    ></van-nav-bar>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="white">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div class="list mx-3 white mt-2 fz-12">
          <div
            class="item mt-3"
            v-for="(item, i) in listData"
            :key="`store-list-item-${i}`"
          >
            <router-link :to="`/article/${item.tourarticleId}`" class="image">
              <img :src="item.thumb" />
            </router-link>
            <div class="right ml-2">
              <div class="top">
                <div>
                  <div class="title max-line-1 my-1 fz-14 font-weight">
                    <router-link :to="`/article/${item.tourarticleId}`">{{
                      item.title
                    }}</router-link>
                  </div>
                  <div class="author">
                    <img :src="item.authorAvatar" class="avatar" />
                    <span class="ml-2">
                      作者：<i>{{ item.author }}</i>
                    </span>
                  </div>
                </div>
                <div class="thumb_up ml-1" @click="up(item.tourarticleId)">
                  <div class="thumb_up-icon">
                    <van-icon name="good-job" />
                  </div>
                  <div class="counts">{{ item.hits }}</div>
                </div>
              </div>
              <div class="desc max-line-3 grey--text text--darken-2">
                {{ item.bref }}
              </div>
              <div class="more">
                <icon-svg icon-class="view" class="mr-1"></icon-svg>
                <span class="mr-2">{{ item.readNums }}</span>
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
// import ImagePlace from '@/components/ImagePlace'
import { favToggle, fetchList, randAvatar } from '@/api/article'

export default {
  components: {
    // ImagePlace,
  },
  data() {
    return {
      loading: false,
      finished: false,
      refreshing: false,
      currentPage: 1,
      listData: [],
    }
  },
  methods: {
    async onLoad() {
      if (this.refreshing) {
        this.listData = []
        this.refreshing = false
      }
      const requestData = {
        turnPage: 1,
        curPage: this.currentPage,
        perPage: 10,
      }
      const { dataPages, allPage } = await fetchList(requestData)
      if (this.currentPage >= allPage) {
        this.finished = true
      } else {
        this.currentPage++
      }
      dataPages.forEach((item, index) => {
        dataPages[index].authorAvatar = this.randAvatar()
      })

      this.listData = this.listData.concat(dataPages)
      console.log(this.listData)
      this.loading = false
    },
    onRefresh() {
      this.finished = false
      this.loading = true
      this.onLoad()
    },
    randAvatar() {
      return randAvatar()
    },
    async up(id) {
      const { code, msg } = await this.$store.dispatch('like/thumb', id)
      if (typeof code !== 'undefined') {
        this.$toast(msg)
        const index = this.listData.findIndex(item => {
          return item.tourarticleId === id
        })
        if (msg === '点赞成功！') {
          this.$set(this.listData[index], 'hits', ++this.listData[index].hits)
        }
      }
    },
    async thumbUp(id) {
      const token = this.$store.state.user.token
      const { msg, code, data } = await favToggle(id, token)
      if (code === 0) {
        const index = this.listData.findIndex(item => {
          return item.tourarticleId === id
        })
        if (data.msg === '收藏成功') {
          this.$toast('已收藏')
          this.$set(this.listData[index], 'hits', ++this.listData[index].hits)
        } else if (data.msg === '操作成功') {
          this.$toast('已取消')
          this.$set(this.listData[index], 'hits', --this.listData[index].hits)
        }
      } else {
        this.$toast(msg)
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.page {
  .list {
    .item {
      display: flex;
      justify-content: space-between;
      .image {
        width: 134px;
        min-width: 134px;
        height: 110px;
        max-height: 110px;
        min-height: 110px;
        display: block;
        img {
          width: 100%;
          max-width: 100%;
          max-height: 100%;
          height: auto;
        }
      }
      .right {
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: space-between;
      }
      .top {
        display: flex;
        justify-content: space-between;
        .author {
          display: flex;
          align-items: center;
          .avatar {
            width: 18px;
            height: 18px;
            border-radius: 50%;
          }
          i {
            font-style: normal;
            color: #ff5f3e;
          }
        }
        .thumb_up {
          align-self: center;
          display: flex;
          flex-direction: column;
          .thumb_up-icon {
            font-size: 22px;
            line-height: 0.8;
            color: #ff5f3e;
            align-self: center;
          }
          .counts {
            color: #ff5f3e;
            text-align: center;
          }
        }
      }
    }
  }
}
</style>
